<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://www.zealer.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2952901_81fe3yaw26h.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>ZEALER 官网_Technology Stays True Here </title>
</head>
<style>

</style>

<body>
    <div class="nav_bgc">
        <div class="nav" style="width: 1080px;">
            <div class="logo"><img
                    src="https://www.zealer.com/dist/images/sidebar_icon_logo_normal8@2x.png?651c9ec30079873f09a3b98276f462ca"
                    alt=""></div>
            <ul class="chose">
                <li><a href="index.html">首页</a></li>
                <li><a href="community.html">社区</a></li>
                <li><a href="expert.html">达人专区</a></li>
                <li class="act"><a href="active.html">活动</a>
                    <img src="https://www.zealer.com/dist/images/icons_images_PC_dark_hot@2x.png?651c9ec30079873f09a3b98276f462ca"
                        alt="">
                </li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" placeholder="搜索作品/话题/用户">
            </div>
            <div class="head_link">
                <a href="" class="down down_phone">
                    <i class="iconfont icon-xiazai"></i>
                    <p>下载手机版</p>
                    <div class="qrCode">
                        <span class="tria"></span>
                        <img src="https://www.zealer.com/dist/images/qrcode-app.png?651c9ec30079873f09a3b98276f462ca"
                            alt="">
                        <p>ZEALER 手机版</p>
                    </div>
                </a>
                <a href="" class="down">
                    <i class="iconfont icon-bianji"></i>
                    <p>创作平台</p>
                </a>
                <div class="login">
                    <div class="rig">
                        <a href="login.html">登录</a>
                        <span>|</span>
                        <a href="sign.html">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="all">
        <div class="login-top">
            <div class="login-left-bg">
                <img src="https://www.zealer.com/dist/images/images_empty_pc_dark_zaaap-login@3x.png?3d9005478201f0ae0099f455f47503fe"
                    alt="">
            </div>
            <div class="login login-index">
                <div class="login-title"> <span class="active">账号登录</span> </div>
                <div class="loginDiv">
                    <div name="backcolor" class="login-input">
                        <span>+86</span>
                        <input class="phone" type="number" pattern="[0-9]*" placeholder="手机号">
                    </div>
                    <div class="login-input">
                        <input class='psw' type="password" placeholder="密码"> <i class="iconfont icon-xianshi"></i>
                    </div>
                </div>
                <div class="login-button"><button>登录</button> <a href="/login/password">忘记密码?</a></div>

                <div class="login-qr">
                    <h3>扫码登录</h3>
                    <div class="login-qrcode">
                        <div>
                            <div class="qrcode-body">
                                <div id="login-qrcode"
                                    title="{&quot;type&quot;:&quot;login&quot;,&quot;code&quot;:&quot;3o8rYkHNciVwBpF0unC4XYhzeZh3L1Fl&quot;}">
                                    <img alt="Scan me!"
                                        src=""
                                        style="display: block;">
                                </div>
                                <div class="qr_top">
                                    <h2>二维码已失效</h2> <a>刷新</a>
                                </div>
                            </div>
                        </div>
                        <p>使用ZEALER App扫描二维码登录</p> <strong>在“【我的】页面-设置-扫一扫”扫码登录</strong>
                    </div>
                </div>
                <div class="login-other"><strong><span>社交账号登录 </span>
                        <a alt="wechat登录"><i class="iconfont icon-weixin"></i></a></strong>
                    <a href="sign.html">立即注册</a>
                </div>
                <div class="login-index-right">
                    <div class="img">
                        <img src="https://www.zealer.com/dist/images/login-code.png?3d9005478201f0ae0099f455f47503fe">
                    </div>
                    <a class="hide">账号登录</a>
                    <div class="hide img">
                        <img
                            src="https://www.zealer.com/dist/images/login-account-icon.png?3d9005478201f0ae0099f455f47503fe">
                    </div>
                </div>
            </div>
        </div>
        <div class="login-agree">
            <p><a href="http://beian.miit.gov.cn/" target="_blank">粤 lCP 备 12076188 号 | </a> <a
                    href="/home/document?type=business" target="_blank">ICP经营许可证：粤B2-20190404</a></p>
            <p>Copyright © 2021 ZEALER. All Rights Reserved. </p>
        </div>
    </div>
    <div class="toast" style="display: none;">
        <p></p>
    </div>
    <script src="js/nav.js"></script>
    <script>
        function login_have() {
            $('.qr_top').css('display', 'block')
        }
        function login_hide() {
            $('.qr_top').css('display', 'none')
        }
        // 扫码登录切换
        var flag = true
        $('.login-qr').css('display', 'none')
        $('.login-index-right').click(function () {
            if (flag) {
                $('.login-qr').prevAll().css('display', 'none')
                $('.login-qr').css('display', 'block')
                $('.login-index-right').children().toggleClass('hide')
                setTimeout(login_have, 10000)
                $('.qr_top a').click(function () {
                    login_hide()
                    setTimeout(login_have, 10000)
                })
                flag = false
            } else {
                $('.login-qr').prevAll().css('display', '')
                $('.login-qr').css('display', 'none')
                $('.login-index-right').children().toggleClass('hide')
                flag = true
            }

        })
        // 密码显示
        var flag = true;
        $('.icon-xianshi').click(function () {
            if (flag) {
                $(this).prev().attr('type', 'text')
                flag = false
            } else {
                flag = true
                $(this).prev().attr('type', 'password')
            }
        })
        // 提示框
        function to() {
            $('.toast').css({ "opacity": "0" })
        }
        function have() {
            $('.toast').css({ "display": "block" })
            $('.toast').css({ "opacity": "1" })
        }
        ok_remove = () => {
            $('.toast p').removeClass('ok')
        }
        // 验证账号
        $('.login-button button').click(function () {
            var local_user = JSON.parse(localStorage.getItem('user'))
            if ($('.phone').val() == local_user.phone && $('.psw').val() == local_user.psw) {
                $('.toast p').text('登陆成功')
                $('.toast p').addClass('ok')
                have()
                setTimeout(to, 1500)
                setTimeout(ok_remove, 2000)
                localStorage.setItem('login', true)
                setTimeout(() => {
                    location.href = 'index.html'
                }, 2500)
            } else {
                $('.toast p').text('用户名账号或密码错误')
                have()
                setTimeout(to, 3000)
            }
        })
    </script>

</html>